<template>
  <div>
    <el-form inline-message v-if="!search" ref="Form" :rules="rules" :model="form" label-width="110px">
      <el-form-item label="运动项目" prop="sportId">
        <el-select v-model="form.sportId" @change="sportChange" filterable clearable style="width: 100%;"
          placeholder="请选择">
          <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运动小项" v-if="showSportItem">
        <el-select v-model="form.sportItemId" @change="sportItemIdChange" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item.name" :value="item.sportItemId" v-for="(item,index) in sportItemData"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  v-if="showPerson" :label="title" prop="person">
        <el-select v-model="form.person" @change="personChange" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item.name" :value="title=='教练员'?item.coachId:item.empId" v-for="(item,index) in personData" :key="index"></el-option>
          <!-- <el-option :label="value" :value="key" v-for="(value,key,index) in personData" :key="index"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item  v-if="showPlayer" label="运动员" prop="playerId">
        <el-select v-model="form.playerId" @change="playerChange" filterable clearable style="width: 100%;" placeholder="请选择">
          <el-option :label="item.name" :value="playerIsPId?item.pid:item.playerId" v-for="(item,index) in playerData" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-else style="display: flex;justify-content: space-between;">
      <el-select v-model="searchForm.sportId" size="small" @change="sportChange" filterable clearable style="width: 150px;"
        placeholder="选择运动项目">
        <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index"></el-option>
      </el-select>
      <el-select  v-if="showSportItem" v-model="searchForm.sportItemId" size="small" @change="sportItemIdChange" filterable clearable style="width: 150px;margin-left: 20px;" placeholder="选择运动小项">
        <el-option :label="item.name" :value="item.sportItemId" v-for="(item,index) in sportItemData"
          :key="index"></el-option>
      </el-select>
      <el-select v-if="showPerson" v-model="searchForm.person" size="small" @change="personChange" filterable clearable style="width: 150px;margin-left: 20px;" :placeholder="'选择'+title">
        <el-option :label="item.name" :value="item[personValue]" v-for="(item,index) in personData" :key="index"></el-option>
      </el-select>
      <el-select v-if="showPlayer" v-model="searchForm.playerId" size="small" @change="playerChange" filterable clearable style="width: 150px;margin-left: 20px;" :placeholder="'选择'+playerTitle">
        <el-option :label="item.name" :value="playerIsPId?item.pid:item.playerId" v-for="(item,index) in playerData" :key="index"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import {
    currentRoleEmployee,
    pcm4emp,
    pcm4coach,
    sport_item_by_sportId,
    coach_by_sport,
    playerOfThisSportAndCoach,
    player_coach_map_byEmpId
  } from '@/api/person.js'
  import {
    sport_by_org,
    sport_item,
  } from '@/api/dict.js'
  export default {
    props: {
      sportChangesportItemData: {
        type: Object,
        default: {}
      },
      search: {
        type: String,
        default: ''
      },
      showSportItem: {
        type: Boolean,
        default: true
      },
      showPerson: {
        type: Boolean,
        default: true
      },
      showPlayer: {
        type: Boolean,
        default: false
      },
      isPId: {
        type: Boolean,
        default: false
      },
      isEmp: {
        type: Boolean,
        default: false
      },
      isCoach: {
        type: Boolean,
        default: false
      },
      playerIsPId: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '教职员'
      },
      playerTitle: {
        type: String,
        default: '运动员'
      },
      playerValdata: {
        type: Boolean,
        default: false,
      },
      sportValdata: {
        type: Boolean,
        default: false,
      },
      personValdata: {
        type: Boolean,
        default: true,
      },
      dict_emp: {},
      empIdByplayer: {
        type: Boolean,
        default: false,
      }
    },
    computed: {
      personValue(){
        if(this.isPId){
          return 'pid'
        }else if(this.isEmp){
          return 'empId'
        }else if(this.isCoach || this.title == '教练员'){
          return 'coachId'
        }else{
          return 'empId'
        }
      }
    },
    data() {
      return {
        dict_sport: {},
        dict_sportItem: {},
        sportItemData: [],
        dict_person: {},
        personData: [],
        playerData: [],
        form: {
          sportId: '',
          sportItemId: '',
          person: '',
          playerId: '',
        },
        searchForm: {
          sportId: '',
          sportItemId: '',
          person: '',
          playerId: '',
        },
        rules: {
          person: [{
            required: this.personValdata,
            message: '这是必填项',
            trigger: 'change'
          }, ],
          playerId: [{
            required: this.playerValdata,
            message: '这是必填项',
            trigger: 'change'
          }, ],
          sportId: [{
            required: this.sportValdata,
            message: '这是必填项',
            trigger: 'change'
          }, ],
        },
      }
    },
    watch: {
      sportChangesportItemData(val){
        if(this.sportChangesportItemData.sportId || this.sportChangesportItemData.person){
          this.form.sportId = this.sportChangesportItemData.sportId
          this.sportChange()
          this.form.sportItemId = this.sportChangesportItemData.sportItemId?this.sportChangesportItemData.sportItemId:''
          this.form.person = this.sportChangesportItemData.person?this.sportChangesportItemData.person:''
          this.form.playerId = this.sportChangesportItemData.playerId?this.sportChangesportItemData.playerId:''
        }else{
          this.searchForm = {
            sportId: '',
            sportItemId: '',
            person: '',
            playerId: '',
          }
          this.getSport()
          this.sportChange()
        }
      }
    },
    created() {
      this.getSport()
      this.sportChange()
    },
    methods: {
      playerChange(e){
        if(this.search){
          this.$emit('selectDataChange',this.searchForm)
        }else{
          this.$emit('selectDataChange',this.form)
        }
      },
      personChange(e) {
        let data = {}
        this.form.playerId = ''
        this.searchForm.playerId = ''
        data.sportId = this.form.sportId || this.searchForm.sportId
        if(this.isEmp){
          data.empId = this.form.person || this.searchForm.person
        }else{
          data.coachId = this.form.person || this.searchForm.person
        }
        data.isImp = 3
        playerOfThisSportAndCoach(data).then(res=>{
          this.playerData = res.data
        })
        if(this.search){
          this.$emit('selectDataChange',this.searchForm)
        }else{
          this.$emit('selectDataChange',this.form)
        }
      },
      sportChange(e){
        // if(!e){
        //   return
        // }
        this.form.sportItemId = ''
        this.form.person = ''
        this.form.playerId = ''
        this.searchForm.sportItemId = ''
        this.searchForm.person = ''
        this.searchForm.playerId = ''
        let data = {}
        if(e || this.form.sportId) data.sportId = e || this.form.sportId
        sport_item_by_sportId(data).then(res => {
          if (res.code === 200) {
            this.sportItemData = res.data
            let sportId = this.form.sportId || this.searchForm.sportId
            let sportItemId = this.form.sportItemId || this.searchForm.sportItemId
            let data = {}
            if(sportId) data.sportId = sportId
            if(sportItemId) data.sportItemId = sportItemId
            if(this.title == '教练员'){
              coach_by_sport(data).then(res => {
                this.personData = res.data
                this.form.person = this.sportChangesportItemData.person?this.sportChangesportItemData.person:''
                this.form.playerId = this.sportChangesportItemData.playerId?this.sportChangesportItemData.playerId:''
                if(this.search){
                  this.$emit('selectDataChange',this.searchForm)
                }else{
                  this.$emit('selectDataChange',this.form)
                }
              })
            }else if(this.isPId || this.isEmp){
              if(!data.sportId) data = {}
              currentRoleEmployee(data).then(res => {
                this.personData = res.data
                // res.data.forEach(item=>{
                //   this.personData[item[this.personValue]] = item.name
                // })
                if(this.search){
                  this.$emit('selectDataChange',this.searchForm)
                }else{
                  this.$emit('selectDataChange',this.form)
                }
              })
            }else{
              pcm4emp(data).then(res => {
                this.personData = res.data
                if(this.search){
                  this.$emit('selectDataChange',this.searchForm)
                }else{
                  this.$emit('selectDataChange',this.form)
                }
              })
            }
            if(this.showPlayer) {
              let json = {}
              if (this.form.sportId) json.sportId = this.form.sportId
              json.isImp = 3
              playerOfThisSportAndCoach(json).then(res=>{
                this.playerData = res.data
              })
            }
          }
        })
      },
      sportItemIdChange(e) {
        this.form.person = ''
        let data = {}
        data.sportId = this.form.sportId || this.searchForm.sportId
        data.sportItemId = this.form.sportItemId || this.searchForm.sportItemId
        if(this.title == '教练员'){
          coach_by_sport(data).then(res => {
            this.personData = res.data
            if(this.search){
              this.$emit('selectDataChange',this.searchForm)
            }else{
              this.$emit('selectDataChange',this.form)
            }
          })
        }else if(this.isPId || this.isEmp){
          currentRoleEmployee(data).then(res => {
            this.personData = res.data
            if(this.search){
              this.$emit('selectDataChange',this.searchForm)
            }else{
              this.$emit('selectDataChange',this.form)
            }
          })
        }else{
          pcm4emp(data).then(res => {
            this.personData = res.data
            if(this.search){
              this.$emit('selectDataChange',this.searchForm)
            }else{
              this.$emit('selectDataChange',this.form)
            }
          })
        }
      },
      getSport() {
        sport_by_org().then(res => {
          this.dict_sport = res
        })
        sport_item().then(res => {
          this.dict_sportItem = res
        })
        setTimeout(()=> {
          if(this.sportChangesportItemData.sportId){
            this.form.sportId = this.sportChangesportItemData.sportId
            this.sportChange()
            this.form.sportItemId = this.sportChangesportItemData.sportItemId?this.sportChangesportItemData.sportItemId:''
            this.form.person = this.sportChangesportItemData.person?this.sportChangesportItemData.person:''
            this.form.playerId = this.sportChangesportItemData.playerId?this.sportChangesportItemData.playerId:''
          }else{
            this.searchForm = {
              sportId: '',
              sportItemId: '',
              person: '',
              playerId: '',
          }
        }
        }, 300);
      },
      formValid(callback){
        this.$refs.Form.validate((valid) => {
          if(valid){
            callback(true)
          }else{
            callback(false)
          }
        })
      },
    }
  }
</script>

<style>
</style>
